<script setup lang="ts">
import {ref,onMounted} from 'vue'
import {useRouter} from "vue-router";
const router = useRouter()
let photoBase = 'http://149.88.64.236:2003'
// let photoBase = 'http://node.luox.online'
let photoList:string[] = [
  photoBase+'/public/images/photo_1.jpg',
  photoBase+'/public/images/photo_2.jpg',
  photoBase+'/public/images/photo_3.jpg',
  photoBase+'/public/images/photo_4.jpg',
  photoBase+'/public/images/photo_5.jpg',
  photoBase+'/public/images/photo_6.jpg',
  photoBase+'/public/images/photo_7.jpg',
  photoBase+'/public/images/photo_8.jpg',
  photoBase+'/public/images/photo_9.jpg',
  photoBase+'/public/images/photo_10.jpg',
    ]

    console.log('照片数量',photoList.length);
    

let photoView = ref<HTMLElement>()

// 初始化绑定触摸事件
let photoInit = () => {
  photoView.value?.addEventListener('touchstart',photoStart)
  photoView.value?.addEventListener('touchmove',photoMove)
  photoView.value?.addEventListener('touchend',photoEnd)
}

// 触摸事件接口
interface pointInterface {
  startX:number,
  startY:number,
  moveEndX:number,
  moveEndY:number,
  differenceX:number, // x滑动之后的差值
  differenceY:number,
  derication:string
}

let pointConfig:pointInterface = {
  startX:0,
  startY:0,
  moveEndX:0,
  moveEndY:0,
  differenceX:0,
  differenceY:0,
  derication:''
}
type viewConfig = {
  screenH:number,
  screenW:number
}

let viewConfig: viewConfig = {
  screenH: 0,
  screenW: 0,
}



// 触摸开始
let photoStart = (e:any) => {
  e.preventDefault()
  pointConfig.startX = e.touches[0].clientX
  pointConfig.startY = e.touches[0].clientY
}

// 触摸移动
let photoMove = (e:any) => {
  e.preventDefault()
  pointConfig.moveEndX = e.changedTouches[0].pageX
  pointConfig.moveEndY = e.changedTouches[0].pageY
  pointConfig.differenceX = pointConfig.moveEndX - pointConfig.startX //确认滑动的差值
  pointConfig.differenceY = pointConfig.moveEndY - pointConfig.startY
  //   因为很难有直上直下的滑动屏幕所以需要写一个兼容写法
  if(Math.abs(pointConfig.differenceX) > Math.abs(pointConfig.differenceY) && pointConfig.differenceX > 0){
    pointConfig.derication = 'right'
    let rotate = Math.atan(pointConfig.differenceX / viewConfig.screenW) * (180 / Math.PI)
    photoView.value!.style.transform = `rotate(${rotate}deg)`
  }else if(Math.abs(pointConfig.differenceX) > Math.abs(pointConfig.differenceY) && pointConfig.differenceX < 0) {
    pointConfig.derication = 'left';
    let rotate = Math.atan(pointConfig.differenceX / viewConfig.screenW) * (180 / Math.PI)
    photoView.value!.style.transform = `rotate(${rotate}deg)`
  }else if(Math.abs(pointConfig.differenceX) < Math.abs(pointConfig.differenceY) && pointConfig.differenceY > 0) {
    pointConfig.derication = 'bottom'
    let rotate = Math.atan(pointConfig.differenceY / viewConfig.screenH) * (180 / Math.PI)
    photoView.value!.style.transform = `rotate(${rotate}deg)`
  }else if (Math.abs(pointConfig.differenceX) < Math.abs(pointConfig.differenceY) && pointConfig.differenceX < 0) {
    pointConfig.derication = 'top'
    let rotate = Math.atan(pointConfig.differenceY / viewConfig.screenH) * (180 / Math.PI)
    photoView.value!.style.transform = `rotate(${rotate}deg)`
  }
}


let photoEnd = (e:any) => {
  e.preventDefault()
  pointConfig.moveEndX = e.changedTouches[0].pageX
  pointConfig.moveEndY = e.changedTouches[0].pageY
}
let initViewConfig = () => {
  viewConfig.screenW = document.body.clientWidth;
  viewConfig.screenH = document.body.clientHeight;
}
let ReViewPhotoSrc = ref<string>('')
// photo点击预览
let photoReView = (ViewPhotoSrc:string) => {
  ReViewPhotoSrc.value = ViewPhotoSrc
}
// 取消预览弹窗
let photoCancelReView = () => {
  ReViewPhotoSrc.value = ''
}

let backHandler = () => {
  router.push('/home')
}

onMounted(() => {
  photoInit()
  initViewConfig()
})
</script>

<template>
  <div class="photos">
    <button class="back" @click="backHandler">返回</button>
    <div class="photos-container" ref="photoView">
      <h1 class="photos-title">Phtots</h1>
      <div class="roate-container">
        <div v-for="(item,index) in photoList" :key="index"  :style="{transform:`rotateY(${index*(360 / photoList.length)}deg) translateZ(275px)`}">
          <img @touchstart="photoReView(item)" @click="photoReView(item)" class="photo" v-lazy="item" :key="index">
        </div>
      </div>
    </div>
    <div v-if="ReViewPhotoSrc !== '' " @click="photoCancelReView" class="preview-mask">
      <img class="review-photo" :src="ReViewPhotoSrc" alt="" srcset="">
    </div>
  </div>
</template>


<style lang="scss" scoped>
.photos {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url("~@/assets/images/mobiel/mobiel_bg_3.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: cover;
  .back {
    font-family: 摆烂躺平,"Microsoft YaHei UI Light";
    font-size: 18px;
    outline: none;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    line-height: 35px;
    text-align: center;
    color: #fff;
    border: none;
    background-color: rgb(240, 98, 146);
    box-shadow: 0px 0px 10px rgb(240, 98, 146);
  }
  .photos-container {
    transform: rotate(18.2576deg);
    .photos-title {
      text-align: center;
      font-family: 摆烂躺平;
      color: rgb(124, 56, 56);
    }
    .roate-container {
      width: 200px;
      height: 300px;
      position:relative;
      margin:auto;
      margin-top:150px;
      transform-style:preserve-3d;
      transform:rotateZ(-100deg);
      animation: fn 10s;    //动画名称为fn，动画时间为10s
      animation-iteration-count: infinite;   //动画效果无限循环
      animation-timing-function: linear;    //线性动画
      position: relative;    //相对布局
      div {
        width:100px;
        height:200px;
        position: absolute;
        left:0;
        top:0;
        .photo {
          width: 100%;
          height: 100%;
          user-select: none;
        }
      }
    }
  }
}
@-webkit-keyframes fn{
  0% {transform:rotateX(-10deg) rotateY(0deg);}
  100%{transform:rotateX(-10deg) rotateY(360deg);}
}
@keyframes fn{
  0% {transform:rotateX(-10deg) rotateY(0deg);}
  100%{transform:rotateX(-10deg) rotateY(360deg);}
}

.preview-mask {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .review-photo {
    width: 100%;
    max-width: 600px;
    object-fit: cover;
  }
}
</style>
